import React from 'react'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom'
import { connect } from 'react-redux'
import { changeIsShowTarbar } from '../../store/actions/tabbar'
 const TabBar= props => {
  const navigate = useNavigate()
  function handleClick(number) {
    number===0?navigate('/home'):navigate('/about')
  }
  return (
    props.isShowTarbar===true?
    (<Tabbar activeColor='#f44336' inactiveColor='#000'onChange={v=>handleClick(v)}>
      <Tabbar.Item icon={ac => <img alt='tab' src={ac ? require("../../assets/img/home_act.png") : require("../../assets/img/home.png")} />}>首页</Tabbar.Item>
      <Tabbar.Item icon={ac => <img alt='tab' src={ac ? require("../../assets/img/my_act.png") : require("../../assets/img/my.png")} />}>我的</Tabbar.Item>
    </Tabbar>):(<div style={{display:'none'}}></div>)
  )
}
export default connect(
  state =>({
    isShowTarbar:state.isShowTarbar
  }),{
    changeIsShowTarbar
  }
)(TabBar)
